import "./index.less"
import { LeftOutline } from 'antd-mobile-icons'
import  OrdinaryBeing  from "./conmpones/ordinaryBeing"
function Home() {
    let fun 
    const  gainRef = ()=>{
        fun("这是父组件穿的值")
    }
    
    const  childRef = (callback)=>{
        fun = callback
    }
    return (
        <div className="main">
            <div className="title">
                <div><LeftOutline /></div>
                <div onClick={gainRef}>首页</div>
                <div><img style={{ width: "20px", height: '20px' }} src={require("@/assets/home/mine_content_shezhi@2.png")} alt="" /></div>
            </div>
            <div className="content">
                <div className="personage">
                    {/* 个人信息 */}
                    <div className="personage-user">
                        <div className="personage-user-left">
                            <div className="personage-user-left-img">
                                <div className="personage-user-left-img-user"><img src="https://img1.baidu.com/it/u=3946289580,3453993027&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800" alt="" /></div>
                                <div className="personage-user-left-img-bj"><img src={require("@/assets/home/mine_content_bianji@2.png")} alt="" /></div>
                            </div>
                            <div className="personage-user-left-right">
                                <div className="personage-user-left-right-name">北北北萨迪</div>
                               <div style={{display:"flex"}}>
                                <span className="personage-user-left-right-jifen">积分11 <img src={require("@/assets/home/mine_content_jifenjiantou@2.png")} alt="" /></span>
                               </div>
                            </div>
                        </div>

                        <div className="personage-user-right">
                            <img src={require("@/assets/home/mine_top_rightarrow@2.png")} alt="" />
                        </div>
                    </div>
                     {/* 粉丝 */}
                     <div className="personage-fans">
                        <div className="personage-fans-item">
                            <div className="personage-fans-item-num">2321</div>
                            <div className="personage-fans-item-name">关注</div>
                        </div>
                        <div className="personage-fans-item">
                            <div className="personage-fans-item-num">5664</div>
                            <div className="personage-fans-item-name">粉丝</div>
                        </div>
                        <div className="personage-fans-item">
                            <div className="personage-fans-item-num">2341</div>
                            <div className="personage-fans-item-name">获赞</div>
                        </div>
                     </div>
                </div>
                {/* 记录 */}
                <div className="record">
                     <div className="record-item">
                        <img src={require("@/assets/home/mine_content_good@2.png")} alt="" />
                        <div>我的点赞</div>
                        <img src={require("@/assets/home/mine_top_rightarrow@2.png")} alt="" />
                     </div>
                    <div className="record-item">
                        <img src={require("@/assets/home/mine_user_my_collection_icon@2.png")} alt="" />
                        <div>我的收藏</div>
                        <img src={require("@/assets/home/mine_top_rightarrow@2.png")} alt="" />
                    </div>
                    <div className="record-item">
                        <img src={require("@/assets/home/shop_m_footprint@2.png")} alt="" />
                        <div>我的浏览</div>
                        <img src={require("@/assets/home/mine_top_rightarrow@2.png")} alt="" />
                    </div>
                    <div className="record-item">
                        <img src={require("@/assets/home/mine_content_pl@2.png")} alt="" />
                        <div>我的评论</div>
                        <img src={require("@/assets/home/mine_top_rightarrow@2.png")} alt="" />
                    </div>
                </div>
                 <OrdinaryBeing childRef={childRef}></OrdinaryBeing>
            </div>
        </div>
    )
}
export default Home